<template>
    <div id="show_box">
        <div class="left-box">
          <h1 style="margin-top: 20px;color: white" @click="toIndex()"><i>《返回首页</i></h1>
        </div>

        <div class="canvas_box">

            <canvas id="nes-canvas" width="256" height="240" style="height: 100%"></canvas>
        </div>

        <div class="right_box" style="background-color: rgba(0, 0, 0, 0%);">
            <el-popover placement="bottom" width="200px"
                        style="padding-left: 10px"
                        height="70" trigger="click" v-model="gameListShow">
                <el-button slot="reference" style="background-color: rgba(0, 0, 0, 0);color: gold;
              margin-top: 50px;

                ">选择游戏</el-button>
                <div class="browBox" style="height: 600px;margin-top: 20px">
                    <ol>
                        <li v-for="index in gameList" :key="index" @click="load_game(index)" style="color: gold">
                            {{ index }}
                        </li>
                    </ol>
                </div>
            </el-popover>


        </div>


    </div>
</template>
<style>
    @import './game.css';
</style>

<script>

import {nes_load_url} from'./nes-embed'
import axios from 'axios';
import '../../api/request';
export default {

    data() {
        return {
            style: {
                display: 'block',
            },
            gameList: [],
            gameListShow: false,
        }

    },
    created() {
        const user = localStorage.getItem('user');
        if (user===null){
            alert('请先登录！');
            window.location.href='loginByPassword.html'
        }
        axios.get('/game/list').then(res => {
            this.gameList = res.data.data;

        })
    },
    methods: {
        load_game(name) {
            nes_load_url("nes-canvas", `http://localhost:8088/game/download/${name}`)
        },
      toIndex(){
        window.location.href = "index.html"
      }
    }
}
</script>
